<template>
  <div class="entrusting center-box">
    <div class="entrust-form">
      <div class="form-row">
        <label class="form-label required">当前代办人:</label>
        <div class="form-value">
          <div class="agent-box">
            <span v-if="agent.name" class="agent-name">{{ agent.name }}</span>
            <span v-else class="agent-placeholder">请选择代办人</span>
          </div>
        </div>
        <zgButton type="primary" @click="selectAgent">选择</zgButton>
      </div>
      <div class="form-row">
        <label class="form-label required">有效期:</label>
        <ZgDateRangePicker v-model="dateRange" style="width: 300px" />
      </div>
    </div>
    <ZgPersonnelSearch :isSingle="false" ref="ZgPersonnelSearch" @onOk="selectNextuser"></ZgPersonnelSearch>
    <div class="flx w100">
      <zgButton class="mr20">取消</zgButton>
      <zgButton @click="onSave">保存</zgButton>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: true,
      agent: { name: '', id: '' },
      dateRange: []
    }
  },
  mounted () {
    this.open()
  },
  methods: {
    open () {
      this.$http.post('/zg-autoflow/delegater/getSettleWorkflowDelegater', {}, res => {
        console.log(res, 'res')
      })
    },
    selectAgent () {
      // 打开人员选择弹窗，选中后赋值 this.agent
      // 这里可集成你项目的人员选择器
      this.$refs.ZgPersonnelSearch.open()
    },
    selectNextuser (val) {
      this.agent.id = val[0].id
      this.agent.name = val[0].name
    },
    onSave () {
      this.$http.post(
        '/zg-autoflow/delegater/addSettleWorkflowDelegater',
        {
          delegater: this.agent.id,
          delegaterName: this.agent.name,
          effectiveBeginDate: this.dateRange[0] || '',
          effectiveEndDate: this.dateRange[1] || ''
        },
        (res) => {
          this.$message.success('代办人指定成功')
          this.open()
        }
      )
    },
    onClear () {
      this.agent = { name: '' }
      this.dateRange = []
    }
  }
}
</script>

<style scoped>
.entrusting {
  padding: 24px 0 0 0;
}
.center-box {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.form-label {
  width: 100px;
  text-align: right;
  margin-right: 8px;
  font-weight: bold;
}
.required:before {
  content: '*';
  color: red;
  margin-right: 4px;
}
.form-value {
  flex: 1;
}
.agent-box {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 180px;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.agent-name {
  font-weight: bold;
}
.agent-placeholder {
  color: #bbb;
}
.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
</style>
